<template>
	<div class="myInput-container">
		<input
			type="text"
			:value="value"
			@blur="handelBlur"
			@input="handelInput"
			:[attr]="[isOk ? 'success' : 'err']"
			:placeholder="placeholder"
		/>
	</div>
</template>

<script>
	//要实现的功能：输入验证
	//1. 实现父传子验证，是否为空
	//2. 进行动态的设置：class
	//3. 实现子组件的内容修改通知父组件修改数据

	// 实现输入框子组件向父组件传递参数
	// 1. 首先在子组件绑定:value="value"
	// 2. 在子组件中绑定@input事件，触发input事件，this.$emit('input',event.target.value);
	// 3. 父组件通过 v-model="user.username"

	export default {
		props: {
			value: {
				type: String,
				require: true,
			},
			// 验证规则
			reg: {
				type: RegExp,
				default: () => {
					return /^.{1,20}$/;
				},
			},
			// 提示信息
			placeholder: {
				type: String,
				required: true,
			},
		},
		data() {
			return {
				isOk: true, //验证通过的判断
				attr: "", //动态的绑定设置class
			};
		},
		methods: {
			// 当失去焦点的时候
			handelBlur() {
				//动态的设置 class 类名关键字
				this.attr = "class";
				// 定义一个正则
				// const regVal = /^1[3|4|5|6|7|8|9]\d{9}$/;

				if (this.reg.test(this.value)) {
					this.isOk = true;
				} else {
					this.isOk = false;
				}
			},
			// 监听子组件的内容的变化
			handelInput(event) {
				this.$emit("input", event.target.value);
			},
		},
	};
</script>

<style lang="less" scoped>
	input {
		width: 100%;
		line-height: 50px;
		border-color: transparent;
		border-bottom: 5px solid #ccc;
	}
	// 失败的颜色
	.err {
		color: red;
		border-bottom-color: red;
	}
	// 成功的颜色
	.success {
		color: green;
		border-bottom-color: green;
	}
</style>